<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <!--关键数据-->
    <el-card shadow="never" body-style="padding: 0px 12px">
        <el-backtop :bottom="100" :visibility-height="100"></el-backtop>
        <div>
            <div v-if="taskId">
                <approve-card :display-return="false"
                              :task="taskId"
                              :busi-id="customerId"
                              :buttons="['SUBMIT','INVALID']"
                              :before-approve='validate'
                              @runTask="runTask">
                    <ft-return-btn text="返回客户列表" @click="goBackList()" slot="busiButton"></ft-return-btn>
                    <ft-operation-log :source-id="customerId"
                                      slot="busiButton"
                                      style="float: right; margin-left: 10px;">
                    </ft-operation-log>
                </approve-card>
            </div>
            <div v-else>
                <ft-return-btn text="返回客户列表" @click="goBackList()" slot="busiButton"></ft-return-btn>
                <ft-operation-log :source-id="customerId"
                                  slot="busiButton"
                                  style="float: right; margin-left: 10px;">
                </ft-operation-log>
            </div>

            <el-row v-show="!editMain" style="padding: 20px 12px">
                <el-col :span="4" align="left" style="line-height: 36px">
                    <span style="font-size: 14px;color: #747778">基础关键资料</span>
                </el-col>
            </el-row>
            <div :class="{cardBackColor:!editMain}" style="margin: 20px 12px">
                <el-row v-if="editMain">
                    <el-col align="left" style="white-space: nowrap;" :span="23">
                    <span style="font-size: 28px;color: #2A2D2E;line-height: 36px;text-align: left">
                        <b>{{person.customerName}}</b>
                    </span>
                    </el-col>
                    <el-col align="right" :span="1">
                        <el-button v-show="editMain && editable" size="small" @click="edit()" plain>编辑</el-button>
                    </el-col>
                </el-row>
                <el-form ref="person"
                         :model="person"
                         :rules="rules"
                         v-loading="loading"
                         style="text-align: left" inline>
                    <el-row style="padding-left: 12px;padding-right: 12px;padding-bottom: 24px">

                        <el-col v-if="!editMain" :md="8" :lg="6">
                            <el-form-item label="客户名称" prop="customerName">
                                <el-input v-model="person.customerName" v-if="!editMain"></el-input>
                                <span v-else>{{person.customerName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="证件类型" prop="identityType">
                                <ft-enum-select type="data"
                                                v-model="person.identityType"
                                                service-name="lss-customer"
                                                type-name="personalType"
                                                placeholder="请选择证件类型"
                                                :editing="!editMain"
                                                @change="clearIdentityNo">
                                </ft-enum-select>
                            </el-form-item>
                        </el-col>

                        <el-col :md="8" :lg="6">
                            <el-form-item label="证件号码" prop="identityNo">
                                <el-input v-model="person.identityNo" v-if="!editMain"></el-input>
                                <span v-else>{{person.identityNo}}</span>
                            </el-form-item>
                        </el-col>

                        <el-col :md="8" :lg="6">
                            <el-form-item label="主办客户经理" prop="mainManagerId">
                                <ft-user v-model="person.mainManagerId"
                                         :editable="!editMain"
                                         :customerManagerId="person.mainManagerId"
                                         @matchedOption="mainManagerChangeMatched"
                                         @unmatchedOption="mainManagerChangeMatched"/>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="协办客户经理" prop="viceManagerId">
                                <ft-user-with-filter v-model="person.viceManagerId"
                                                     ref="viceManagerRef"
                                                     :editable="!editMain"
                                                     :customerManagerId="person.viceManagerId"
                                                     @matchedOption="viceManagerChangeMatched"
                                                     @unmatchedOption="viceManagerChangeMatched">

                                </ft-user-with-filter>
                            </el-form-item>
                        </el-col>

                        <el-col :md="8" :lg="6">
                            <el-form-item label="所属部门" prop="deptName">
                                <ft-input :editing="false" v-model="person.deptName"></ft-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="变更类型" prop="changeType">
                                <ft-customer-change-type v-model="person.changeType"
                                                         service-name="lss-customer"
                                                         type-name="customerChangeType"
                                                         :editable="!editMain">
                                </ft-customer-change-type>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="变更说明" prop="changeRemark">
                                <el-input v-if="!editMain"
                                          v-model="person.changeRemark"
                                          :autosize="{ minRows: 1, maxRows: 5}"
                                          type='textarea'>
                                </el-input>
                                <span v-else class="form-textarea" :title="person.changeRemark">
                                    {{person.changeRemark}}
                                </span>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

                    <el-row>
                        <el-col align="right">
                            <el-button size="mini"
                                       @click="cancel()"
                                       :disabled="editMain"
                                       v-if="!editMain">取消
                            </el-button>
                            <el-button type="primary"
                                       size="mini"
                                       @click="onSave()"
                                       v-if="!editMain"
                                       style="margin-left: 24px"
                                       :disabled="editMain || saveStatus">保存
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <!--详细信息-->
        <div>
            <el-dropdown v-if="(!showTabInfo || !showTabAtt || !showTabGua || !showTabZc) && editMain && editable"
                         @command="addTab"
                         trigger="click"
                         :show-timeout="outTime" :hide-timeout="outTime"
                         style="z-index:999;right: 12px;top: 9px;float: right;position:relative">
                <el-button type="primary"
                           style="padding: 7px 18px 7px 8px;font-size: 14px;line-height: 20px;"
                           @click="" round>
                    <span style="padding: 2px 0px;"><i class="joys-icon-addagain" style="margin-right: 18px;"/>继续添加</span>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="background-color: #353737" class="add-tabs-menu">
                    <el-dropdown-item :disabled="showTabInfo" command="tabInfo" class="add-tabs-item">
                        <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                            <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                            <span style="margin-left: 11px;margin-right: 27px">基本信息</span>
                        </div>
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="showTabZc" command="tabZc" class="add-tabs-item">
                        <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                            <i class="joys-icon-attachment" style="margin-left: 6px"/>
                            <span style="margin-left: 11px;margin-right: 27px">资产信息</span>
                        </div>
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="showTabGua" command="tabGua" class="add-tabs-item">
                        <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                            <i class="joys-icon-attachment" style="margin-left: 6px"/>
                            <span style="margin-left: 11px;margin-right: 27px">融资及担保</span>
                        </div>
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="showTabAtt" command="tabAtt" class="add-tabs-item">
                        <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                            <i class="joys-icon-attachment" style="margin-left: 6px"/>
                            <span style="margin-left: 11px;margin-right: 27px">附件信息</span>
                        </div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <div style="height: 54px;margin: 0px;display: flex;justify-content: space-around"
                 v-show="(!showTabInfo && !showTabAtt) && editMain && editable"></div>

            <el-tabs v-model="tabsIndex" @tab-click="tab" stretch>
                <el-tab-pane v-if="showTabInfo" name="0" label="基本信息">
                    <div>
                        <!--基本信息-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                            <person-info :customerId="customerId"
                                         @changeMarriage="changeMarriage"
                                         @changeCompany="changeCompany"
                                         @changeDataVersion="changeDataVersion"
                                         :dataVersion="dataVersion"
                                         :editable="editable"/>
                        </el-card>
                        <!--单位信息-->
                        <el-card v-show="showCompanyInfo" body-style="padding: 0px 12px 12px;"
                                 style="margin-bottom: 8px" :editable="editable">
                            <company-info :customerId="customerId"
                                          @changeCompany="changeCompany"
                                          :showCompanyInfo="showCompanyInfo"
                                          @changeDataVersion="changeDataVersion"
                                          :dataVersion="dataVersion"
                                          :editable="editable"/>
                        </el-card>
                        <!--居住信息-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                            <residential-info :customerId="customerId"
                                              @changeDataVersion="changeDataVersion"
                                              :dataVersion="dataVersion"
                                              :editable="editable"></residential-info>
                        </el-card>
                        <!--婚姻信息-->
                        <el-card v-show="showMarriage" body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                            <marriage-info :customerId="customerId"
                                           @changeMarriage="changeMarriage"
                                           :editable="editable"></marriage-info>
                        </el-card>
                        <!--家庭信息-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                            <cust-member :customerId="customerId" :editable="editable"></cust-member>
                        </el-card>
                        <!--资产信息-->
                        <!--<el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">-->
                        <!--<investment :customerId="customerId"></investment>-->
                        <!--</el-card>-->
                        <!--银行账户-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                            <bank-account :sourceBillId="customerId"
                                          :customerName="person.customerName"
                                          :editable="editable"/>
                        </el-card>
                    </div>
                </el-tab-pane>

                <el-tab-pane v-if="showTabZc" name="1" label="资产信息">
                    <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                        <investment :customerId="customerId" :editable="editable"/>
                    </el-card>
                </el-tab-pane>

                <el-tab-pane v-if="showTabGua" name="2" label="融资及担保">
                    <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                        <financing-info :customerId="customerId" :editable="editable"></financing-info>
                    </el-card>
                    <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                        <guarantee-info :customerId="customerId" :editable="editable"></guarantee-info>
                    </el-card>
                </el-tab-pane>

                <el-tab-pane v-if="showTabAtt" name="3" label="附件信息">
                    <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                        <ft-attach v-if="person&&person.customerId" title="附件信息" sourceType="CUSTOMER"
                                   :sourceId="person.customerId"
                                   :categories="attachClass"
                                   :categories-disabled="categoriesDisabled"
                                   :basePath="'/doc/generate/客户维护/'+person.customerId"></ft-attach>
                    </el-card>
                </el-tab-pane>
            </el-tabs>

        </div>
    </el-card>

</template>

<script>
    import PersonInfo from "../tabs/PersonInfo"
    import BankAccount from "../tabs/BankAccount"
    import CustMember from "../tabs/CustMember";
    import FtInput from "../ft/FtInput"
    import FtUser from "../ft/FtUser"
    import FtUserWithFilter from "../ft/FtUserWithFilter"
    import FtCustomerChangeType from "../ft/FtCustomerChangeType"
    import {existsCustName, existsCustNo, identityFormat} from "@/pages/pc/assets/js/validate/rule.js"
    import CompanyInfo from "../tabs/CompanyInfo";
    import MarriageInfo from "../tabs/MarriageInfo";
    import FinancingInfo from "../tabs/FinancingInfo"
    import Investment from "../tabs/Investment"
    import GuaranteeInfo from "../tabs/GuaranteeInfo"
    import ResidentialInfo from "../tabs/ResidentialInfo"
    import {categories} from 'lss-ui/src/components/js/AttachClass'

    export default {
        name: "CustomerPersonChangeForm",
        components: {
            GuaranteeInfo,
            FinancingInfo,
            MarriageInfo,
            CompanyInfo,
            PersonInfo,
            BankAccount,
            CustMember,
            FtInput,
            FtUser,
            FtUserWithFilter,
            Investment,
            ResidentialInfo,
            FtCustomerChangeType,
        },
        props: {
            customerId: String,
            editable: Boolean,
            initEdit: Boolean,
            taskId: String,
        },
        mounted() {
            this.load()
            categories(this, 'AttachClass', rest => {
                this.attachClass = rest
            })
        },
        data() {
            //根据客户名称判断是否已存在
            let validateCustName = (rule, value, callback) => {
                const _this = this
                if (this.personBack.customerName && value != this.personBack.customerName && value && value != '') {
                    existsCustName(_this, rule, value, callback)
                } else {
                    callback()
                }
            }
            //根据证件号码判断是否已存在
            let validateCustNum = (rule, value, callback) => {
                const _this = this
                if (this.person.identityType == '') {
                    callback(new Error('请选择客户证件类型'))
                } else {
                    if (this.personBack.identityNo && value != this.personBack.identityNo
                        && this.personBack.identityType && value != this.personBack.identityType
                        && value && value != '') {
                        if (!identityFormat(this.person.identityType, value)) {
                            callback(new Error('输入证件号码不合法'))
                        } else {
                            existsCustNo(_this, rule, value, callback)
                        }
                    } else {
                        callback()
                    }
                }
            }
            return {
                //当前登录人的任务是否已经完成，true:没完成，false:已完成
                ifTaskFinished:true,
                tabsIndex: "0",
                saveStatus: false,
                //附件分类
                attachClass: [],
                categoriesDisabled: {
                    融资业务申请书: {
                        upload: true, delete: false
                    },
                },
                person: {
                    customerId: '',
                    customerName: '',
                    identityType: '',
                    identityNo: '',
                    customerProperty: '',
                    changeType: '',
                    mainManagerId: '',
                    viceManagerId: '',
                    mainManagerName: '',
                    viceManagerName: '',
                    deptName: '',
                    deptId: '',
                },
                personBack: {},
                loading: false,
                editMain: true,
                infoMenu: [],
                dataVersion: 0,
                showTabInfo: false,
                showTabAtt: false,
                showTabZc: false,
                showTabGua: false,
                outTime: 0,
                showMarriage: false,
                showCompanyInfo: false,
                rules: {
                    customerName:
                        [{required: true, message: '客户名称不能为空', trigger: 'blur'},
                            {max: 30, message: '客户名称需在30字内', trigger: 'blur'},
                            {validator: validateCustName, trigger: 'blur'}],
                    identityType:
                        [{required: true, message: '证件类型不能为空', trigger: 'blur'}],
                    identityNo:
                        [{required: true, message: '证件号码不能为空', trigger: 'blur'},
                            {max: 20, message: '证件号码需在20字内', trigger: 'blur'},
                            {validator: validateCustNum, trigger: 'blur'}],
                    mainManagerId:
                        [{required: true, message: '主办客户经理不能为空', trigger: 'change'}],
                    viceManagerId:
                        [{required: true, message: '协办客户经理不能为空', trigger: 'change'}],
                },
            }

        },
        watch: {
            person: {
                handler(val) {
                    // 过滤条件
                    let viceManagerFilter = ''
                    if (val.deptId) {
                        viceManagerFilter = 'dt.dept_id = \'' + val.deptId + '\''
                    }
                    this.$refs.viceManagerRef.load(viceManagerFilter)
                },
                deep: true,
            },
            customerId() {
                this.load()
            },
            showMarriage(val) {
            },
            showCompanyInfo(val) {
            }
        },
        methods: {
            // 审批流校验
            validate(done) {
                let errorMessage = [];
                //表单校验
                if (!this.person.changeType) {
                    errorMessage.push("请维护变更类型")
                }
                if (!this.person.changeRemark) {
                    errorMessage.push("请维护变更说明")
                }
                if (errorMessage.length > 0) {
                    this.$message.error(errorMessage.join(' , '))
                } else if(errorMessage.length === 0){
                    //前台校验通过时，执行审批流代码
                    done()
                }
            },
            runTask(val){
                this.ifTaskFinished=val
            },
            clearIdentityNo() {
                this.person.identityNo = ''
            },
            //匹配部门回写id
            matchingDept(val) {
                this.$set(this.person, 'deptId', val.deptId)
            },

            changeCompany(value) {
                this.showCompanyInfo = value.showCompanyInfo
            },
            changeMarriage(value) {
                this.showMarriage = value.showMarriageInfo
            },
            changeDataVersion(value) {
                this.dataVersion = value
            },
            tab(val) {
                this.tabsIndex = val.name
            },
            goBackList() {
                this.$emit('changeToList');
            },
            load() {
                this.$http.get('/joys-rest/lss-customer/custInfo/person/' + this.customerId).then(
                    resp => {
                        this.person = resp.body
                        this.dataVersion = this.person.dataVersion
                        this.person.stockCode && this.loadFengBaoFinReport()
                        if (this.person.infoMenu && this.person.infoMenu != '') {
                            if (this.person.infoMenu.indexOf('tabAtt') > -1) {
                                this.showTabAtt = true
                                this.tabsIndex = "3"
                            }
                            if (this.person.infoMenu.indexOf('tabGua') > -1) {
                                this.showTabGua = true
                                this.tabsIndex = "2"
                            }
                            if (this.person.infoMenu.indexOf('tabZc') > -1) {
                                this.showTabZc = true
                                this.tabsIndex = "1"
                            }

                            if (this.person.infoMenu.indexOf('tabInfo') > -1) {
                                this.showTabInfo = true
                                this.tabsIndex = "0"
                            }
                        }
                        this.personBack = JSON.parse(JSON.stringify(this.person))
                    },
                    resp => {
                        this.$message.error(resp.body)
                    })
            },
            //关键信息保存
            onSave() {
                const _this = this
                _this.loading = true
                _this.saveStatus = true
                _this.person.dataVersion = _this.dataVersion
                _this.person.customerType = 'PERSONAL'
                _this.$refs.person.validate((valid) => {
                    if (valid) {
                        _this.$http.put('/joys-rest/lss-customer/custInfo/person', _this.person, {
                            params: {
                                sourceModule: "基础关键资料",
                            }
                        }).then(resp => {
                            _this.person = resp.body
                            _this.personBack = _this.person
                            _this.editMain = true
                            _this.loading = false
                            _this.dataVersion = _this.person.dataVersion
                            _this.$message.success('保存成功!')
                        }, resp => {
                            _this.loading = false
                            _this.$message.error(resp.body.message)
                        })
                    } else {
                        _this.loading = false
                        return false
                    }
                })
                _this.saveStatus = false
            },
            //表单取消按钮
            cancel() {
                this.editMain = true
                this.person = this.personBack
                this.$refs.person.clearValidate()
            },
            //表单编辑按钮
            edit() {
                this.editMain = false
                //备份当前表单
                this.personBack = JSON.parse(JSON.stringify(this.person))
            },
            //增加tab页
            addTab(model) {
                if ('tabInfo' == model) {
                    this.showTabInfo = true
                    this.tabsIndex = "0"
                }
                if ('tabZc' == model) {
                    this.showTabZc = true
                    this.tabsIndex = "1"
                }
                if ('tabGua' == model) {
                    this.showTabGua = true
                    this.tabsIndex = "2"
                }
                if ('tabAtt' == model) {
                    this.showTabAtt = true
                    this.tabsIndex = "3"
                }
                if (this.person.infoMenu && this.person.infoMenu != '') {
                    this.person.infoMenu = this.person.infoMenu + ';' + model
                } else {
                    this.person.infoMenu = model
                }
                this.$http.post('/joys-rest/lss-customer/custInfo/tabs/' + this.customerId, null, {
                    params: {
                        'infoMenu': this.person.infoMenu,
                        'customerType': this.person.customerType
                    }
                }).then(resp => {

                })
            },
            //主办客户经理回调
            mainManagerChangeMatched(val) {
                this.$set(this.person, 'mainManagerId', val.userId)
                this.$set(this.person, 'deptName', val.deptName)
                this.$set(this.person, 'deptId', val.deptId)
                this.person.mainManagerName = val.userName
            },
            //协办客户经理回调
            viceManagerChangeMatched(val) {
                this.$set(this.person, 'viceManagerId', val.userId)
                this.person.viceManagerName = val.userName
            },
        }
    }
</script>
<style>
    .add-tabs-menu {
        padding: 0px;
        margin: 0px;
        backgroud-color: #353737;
    }

    .add-tabs_menu.el-dropdown-menu {
        padding: 0px;
        margin: 0px;
        backgroud-color: #353737;
    }

    .add-tabs-menu .el-dropdown-menu__item {
        padding: 0px;
        background: #353737;
    }

    .add-tabs-item.el-dropdown-menu__item {
        color: #C0C1C4;
        background: #353737;
    }

    .add-tabs-item.el-dropdown-menu__item.is-disabled {
        opacity: 0.3;
    }

    .add-tabs-item.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-item.el-dropdown-menu__item:not(.is-disabled):hover, .dropdown-item.el-dropdown-menu__item:focus {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] {
        margin-top: 6px;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow {
        border-bottom-color: #353737;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: #353737;
    }

    .add-tabs-menu {
        padding: 0px;
        margin: 0px;
        backgroud-color: #353737;
    }

    .add-tabs_menu.el-dropdown-menu {
        padding: 0px;
        margin: 0px;
        backgroud-color: #353737;
    }

    .add-tabs-menu .el-dropdown-menu__item {
        padding: 0px;
        background: #353737;
    }

    .add-tabs-item.el-dropdown-menu__item {
        color: #C0C1C4;
        background: #353737;
    }

    .add-tabs-item.el-dropdown-menu__item.is-disabled {
        opacity: 0.3;
    }

    .add-tabs-item.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-item.el-dropdown-menu__item:not(.is-disabled):hover, .dropdown-item.el-dropdown-menu__item:focus {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-item:active {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] {
        margin-top: 6px;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow {
        border-bottom-color: #353737;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: #353737;
    }

    .tab .tabShow {
        padding: 20px;
        width: 100%;
    }

    .tabShow .tabul {
        height: 54px;
        margin: 0px;
        /* background:skyblue; */
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
    }

    .tabShow .tabul .tabli {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .tabShow .tabul .tabli .count {
        height: 100%;
        width: 100px;
        line-height: 54px;
        text-align: Center;
        position: relative;
    }

    .tabShow .tabul .tabli.active .count {
        color: #D62F17;
    }

    .tabShow .tabul .tabli.active .count .line {
        height: 4px;
        width: 60px;
        background: #D62F17;
        position: absolute;
        bottom: -2px;
        left: 20px;
    }

    .tabShow .tabCon {
        width: 100%;
        margin-top: 10px;
        font-size: 18px;
        flex-grow: 1;
        overflow-y: auto;
        height: 560px;
    }

    .tab .showOn {
        width: 100%;
        height: 200px;
        border-top: 1px solid #ccc;
        background: skyblue;
    }

    .tab .codeShow {
        cursor: pointer;
        width: 100%;
        height: 44px;
        border-top: 1px solid #ccc;
        position: relative;
    }

    .codeShow .trangleDown {
        width: 0;
        height: 0;
        border-width: 8px 8px 0;
        border-style: solid;
        border-color: rgb(211, 220, 230) transparent transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -4px 0 0 -4px;
    }

    .codeShow .trangleUp {
        width: 0;
        height: 0;
        border-width: 0px 8px 8px;
        border-style: solid;
        border-color: transparent transparent rgb(211, 220, 230);
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -4px 0 0 -4px;
    }

    .codeShow .code {
        opacity: 0;
        color: rgb(211, 220, 230);
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -10px 0 0 20px;
    }

    .tab:hover .trangleDown {
        transition: all .3s ease 0s;
        transform: translateX(-40px);
    }

    .tab:hover .trangleUp {
        transition: all .3s ease 0s;
        transform: translateX(-40px);

    }

    .tab:hover .code {
        transition: all .3s ease 0s;
        transform: translateX(-30px);
        opacity: 1;
    }

    .codeShow:hover .trangleDown {
        border-color: #409eff transparent transparent;
    }

    .codeShow:hover .trangleUp {
        border-color: transparent transparent #409eff;
    }

    .codeShow:hover .code {
        color: #409eff;
    }

</style>
<style scoped>
    .cardBackColor {
        background-color: #F4F8F9
    }


</style>
